import React, {Component} from 'react';
import globalContext from "../context";
import A from "./A";
import B from "./B";
class Child extends Component {
    getContext(value){
        return (
            <div>
                <h3>Child:接收的数据3</h3>
                <p>userName:{value.userName}</p>
                <p>age:{value.age}</p>
            </div>
        )
    }
    render() {
        const {Consumer} = globalContext;
        return (
            <div>
                <globalContext.Consumer>
                    {
                        value=>{
                            console.log(value);// {userName: 'zhangsan', age: 12}
                            return (
                                <div>
                                    <h3>Child:接收的数据1</h3>
                                    <p>userName:{value.userName}</p>
                                    <p>userName:{value.age}</p>
                                </div>
                            )
                        }
                    }
                </globalContext.Consumer>
                <hr/>
                <Consumer>
                    {
                        ({userName,age})=>{
                            return (
                                <div>
                                    <h3>Child:接收的数据2</h3>
                                    <p>userName:{userName}</p>
                                    <p>userName:{age}</p>
                                </div>
                            )
                        }
                    }
                </Consumer>
                <hr/>
                <Consumer>
                    {this.getContext}
                </Consumer>
                <A/>
                <B></B>
            </div>
        );
    }
}

export default Child;